<template>
  <div>
    <base-page ref="basePage" :basepage="basePage">
      <el-button slot="button" @click="setRole">设置角色</el-button>
    </base-page>
    <template>
      <el-dialog :visible.sync="roleTreeVisible" width="40%" append-to-body center title="设置角色">
        <div style="height : 200px;overflow:auto">
          <el-tree
            :data="roleData"
            :default-checked-keys="roleChecked"
            show-checkbox
            node-key="id"
            ref="roleTree"
            highlight-current
            :props="roleTreeProps"
          ></el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="roleTreeVisible = false">取 消</el-button>
          <el-button type="primary" @click="roleSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import BasePage from "../BasePage.vue";
export default {
  name: "UserManage",
  components: {
    "base-page": BasePage,
  },
  data() {
    return {
      basePage: {
        url: "userOperation",
        buttonConf: {
          insertShow: true,
          deleteShow: true,
        },
        searchConf: [
          [
            {
              title: "用户名",
              type: "input",
              prop: "userName",
            },
            {
              title: "真实姓名",
              type: "input",
              prop: "userReal",
            },
            {
              title: "用户性别",
              type: "select",
              prop: "sex",
              data: [
                { value: "1", label: "男" },
                { value: "0", label: "女" },
              ],
            },
            {
              title: "用户角色",
              type: "select",
              multiple: true,
              prop: "roles",
              data: [],
            },
          ],
        ],
        tableColumnConf: {
          columns: [
            { prop: "userName", label: "用户名" },
            { prop: "userReal", label: "真实姓名" },
            { prop: "sex", label: "用户性别" },
            { prop: "phone", label: "用户电话" },
            { prop: "roles", label: "角色" },
            { prop: "loginTime", label: "上次登录" },
            { prop: "createTime", label: "创建时间" },
          ],
          operation: {
            state: true,
            defs: [
            ],
          },
        },

        detailConf: {
          title: "用户信息",
          data: [],
        },
        formConf: {
          formData: {},
          dialogVisible: false,
          width: "50%",
          title: "用户新增",
          data: [
            {
              title: "用户名",
              type: "input",
              prop: "userName",
            },
            {
              title: "真实姓名",
              type: "input",
              prop: "userReal",
            },
            {
              title: "电话",
              type: "input",
              prop: "phone",
            },
            {
              title: "用户性别",
              type: "select",
              prop: "sex",
              data: [
                { value: "1", label: "男" },
                { value: "0", label: "女" },
              ],
            },
          ],
          rules: {
            userName: [
              {
                validator: (rule, value, callback) => {
                  if (value === "") {
                    callback(new Error("请输入密码"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
          },
        },
      },
      roleTreeVisible: false,
      roleData: [],
      roleChecked: [],
      roleTreeProps: {
        label: "roleName",
        children: "childrens",
      },
    };
  },
  methods: {
    roleSubmit() {
      var user = this.$refs.basePage.getCurrentRow();
      var roleChecked = this.$refs.roleTree.getCheckedNodes();
      var createBy = JSON.parse(localStorage.user).id;
      var data = new Array();
      roleChecked.forEach((e) => {
        if (e.id === undefined) {
          return;
        }
        var item = {};
        item.createBy = createBy;
        item.userId = user.id;
        item.roleId = e.id;
        data.push(item);
      });
      this.COMMON.httpPost(
        this,
        "userRoleOperation/insertBatch",
        {
          "userId": user.id,
          list: data,
        },
        (result) => {
          if (result.result === "SUCCESS") {
            this.roleTreeVisible = false;
            this.$refs.basePage.getPage();
          }
        },
        (result) => {}
      );
    },
    setRole() {
      var user = this.$refs.basePage.getCurrentRow();
      if (user === undefined) {
        return;
      }
      this.roleTreeVisible = true;
      this.$nextTick(() => {
        this.$refs.roleTree.setCheckedKeys([]);
      });
      // 根绝选中用户获取该用户的角色ID
      this.COMMON.httpPost(
        this,
        "userRoleOperation/selectList",
        { userId: user.id },
        (result) => {
          if (result.result === "SUCCESS") {
            var roleIds = new Array();
            result.list.forEach((e) => {
              roleIds.push(e.roleId);
            });
            this.roleChecked = roleIds;
          }
        },
        (result) => {}
      );
    },
    //获取所有角色信息
    getRoles() {
      this.COMMON.httpPost(
        this,
        "roleOperation/selectAll",
        {},
        (result) => {
          if (result.result === "SUCCESS") {
            var data = new Array();
            if (result.list != undefined && result.list.length != 0) {
              this.roleData = result.list;
              result.list.forEach((element) => {
                var item = {};
                item["value"] = element.id;
                item["label"] = element.roleName;
                data.push(item);
              });
            }
            this.basePage.searchConf[0][3]["data"] = data;
          }
        },
        (result) => {}
      );
    },
    event(event) {
      switch (event) {
      }
    },
    operation(row, event) {
      switch (event) {
      }
    },
    selectChange(type, pro, value) {},
    formatter(data, prop, index) {
      switch (prop) {
        case "roles": {
          debugger;
          var value = "";
          data.forEach((element) => {
            if(element === null){
              return ;
            }
            value += element.roleName + " ";
          });
          return value;
        }
        case "sex": {
          if (data === "0") {
            return "女";
          } else {
            return "男";
          }
        }
        default: {
          return data;
        }
      }
    },
  },
  activated: function () {
    this.getRoles();
  },
};
</script>
<style>
</style>